<template>
  <header class="Header" style="background: #303643;color: white;">
    <div class="Header-item" style="width: 2000px">
      <div class="header-search">
        <div>
          <el-input  class="searchBar" v-model="input" placeholder="搜索一下">
            <template #prepend>
              <el-select  class="filterMenu" v-model="select" placeholder="筛选" style="width: 115px">
                <el-option label="仓库" value="1" />
                <el-option label="用户" value="2" />
              </el-select>
            </template>
            <template #append>
              <el-button @click="searchRepo"   :icon="Search" />
            </template>
          </el-input>
        </div>
      </div>
      <nav class="d-flex" style="display: flex; margin-left: 20px">
        <a class="link-item link is-menu-link " @click="IntoPull">
          Pull Request
        </a>
        <a class="link-item link is-menu-link " @click="IntoIssue">
          Issue
        </a>
      </nav>
    </div>
    <div class="Header-item">
      <a class="link-item link is-menu-link " @click="IntoNotifications">
          <div v-if="total>0" class="notify" >
            <el-dropdown>
              <div class="notify-icon" style="margin-top: 8px">
                <el-icon :size="20" color="green" style="margin-top: 10px">
                  <BellFilled />
                </el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <div v-for="item in items"  class="noti-view">
                    <div class="noti-view-item">
                      <p>
                        {{item.title}}
                      </p>
                    </div>
                  </div>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div v-else class="notify">
            <el-dropdown>
              <div class="notify-icon" style="margin-top: 8px;">
                <el-icon :size="20" color="white" style="margin-top: 10px">
                  <BellFilled />
                </el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <div class="noti-view-item">
                    <p>
                      暂无新信息
                    </p>
                  </div>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
      </a >
    </div>
    <div class="Header-item">
      <el-dropdown >
      <div class="avatar" style="color: green">
        <el-avatar :icon="UserFilled" size="small" style="color: green" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="link">用户主页</el-dropdown-item>
          <el-dropdown-item @click="logout">登出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    </div>
  </header>
</template>

<script>
import "@/assets/css/github_cn.css";
import { BellFilled,Search } from '@element-plus/icons-vue';
import request from "@/utils/request";
export default {
  setup(){
    return {Search}
  },
  // mounted() {
  //   window.addEventListener("keydown",this.keyDown)
  //
  // },
  // destroyed() {
  //   window.removeEventListener("keydown",this.keyDown,false)
  //
  // },
  data(){
    return{
      input:'',
      userId:'',
      hasNotify:'',
      items:[],
      total:'',
      select:'1',
    }
  },
  created(){
    this.load()
  },
  methods:{
    IntoPull(){
      this.$router.push('/'+sessionStorage.getItem("userName")+"/pulls")
    },
    IntoIssue(){
      this.$router.push('/'+sessionStorage.getItem("userName")+"/issues")
    },
    IntoNotifications(){
      this.$router.push({
        path:'/'+sessionStorage.getItem("userName")
      })
    },
    handlefocus(e) {

      console.log('blur', e.target.placeholder)

    },
    searchRepo() {
      this.$router.push({path: '/search', query: {content: this.input, mode: this.select}})
    },
    // },
    // keyDown(e){
    //   console.log("e",e.keyCode)
    //   if(e.keyCode===13||e.keyCode===100){
    //     this.searchRepo()
    //   }
    // },
    link(){
      if(sessionStorage.getItem("userId")!=null){
      this.$router.push("/"+sessionStorage.getItem("userName"))
      }else{
        this.$notify({
          title: '错误',
          message: '请先登录',
          type: 'error',
          position: 'bottom-right',
        })}
    },
    logout(){
      sessionStorage.removeItem("userId")
      sessionStorage.removeItem("userName")
      this.$router.push("/login")
    },
    load(){
      this.userId=sessionStorage.getItem("userId")
      console.log(this.userId)
      request.get("/messages/unread",{
        params:{
          currentPage: 1,
          pageSize: 10,
          userIds: this.userId,
        }
      }).then(res => {
        this.items=res.data.records
        this.total=res.data.total
      })

    },

  },
  name: "NaviBar",
  components: {
    BellFilled
  }
}
</script>


<style>

.filterMenu{

}

/*.searchBar{
  --el-input-text-color: white;
  --el-color-info: #ffffff;
  --el-fill-color-blank: #303643;
  --el-fill-color-light: #303643;
}*/

.notify{
  align-items: center;
}

.noti-view-item{
  width: 200px;
  padding-right: 10px;
  padding-left: 10px;
}
.icon{
  margin-top: 6px ;
  align-self: stretch;
}

.avatar{
  margin-top: 7px;
  align-self: stretch;
}
.is-menu-link{
  display: block;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  line-height: 52px;
  transition:.5s;
  text-decoration: none;
  color:white;
}

</style>
